<template>

  <div class="login-container">
<!--    <div class="main">-->
<!--      <div class="white_circle"></div>-->
<!--      <div class="fla fla_one">-->
<!--        <div class="squ squ_one"></div>-->
<!--        <div class="tri tri_one"></div>-->
<!--      </div>-->
<!--      <div class="fla fla_two">-->
<!--        <div class="squ squ_two"></div>-->
<!--        <div class="tri tri_two"></div>-->
<!--      </div>-->
<!--      <div class="fla fla_three">-->
<!--        <div class="squ squ_three"></div>-->
<!--        <div class="tri tri_three"></div>-->
<!--      </div>-->
<!--      <div class="fla fla_four">-->
<!--        <div class="squ squ_four"></div>-->
<!--        <div class="tri tri_four"></div>-->
<!--      </div>-->
<!--    </div>-->
    <el-card class="login-card" shadow="always">
      <h2 class="login-title">登录</h2>


      <div class="login-type-selection">
        <el-card
            class="login-type-card"
            :class="{ active: loginType === 'credentials' }"
            @click="selectLoginType('credentials')">
          <div>  密码登录</div>
        </el-card>

        <el-card
            class="login-type-card"
            :class="{ active: loginType === 'phone' }"
            @click="selectLoginType('phone')">
          <div>手机验证码登录</div>
        </el-card>
      </div>

      <el-form :model="loginForm" ref="loginForm" label-width="80px" @submit.prevent="handleLogin">
        <el-form-item v-if="loginType === 'credentials'" label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item v-if="loginType === 'credentials'" label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item v-if="loginType === 'phone'" label="手机号" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }]">
          <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item v-if="loginType === 'phone'" label="验证码" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <el-input style="width: 150px" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
          <el-button @click="sendCode" :disabled="codeTimer > 0">{{ codeTimer > 0 ? `${codeTimer}s` : '发送验证码' }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from '@/plugins/axios.js'
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import  userStore from '@/stores/userStore';

export default {
  data() {
    return {
      loginType: 'credentials', // 默认登录方式
      codeTimer: 0,
      loginForm: {
        username: '',
        password: '',
        phone: '',
        code: ''
      }
    };
  },
  methods: {
    selectLoginType(type) {
      this.loginType = type;
      // 切换登录方式时重置表单
      this.loginForm.username = '';
      this.loginForm.password = '';
      this.loginForm.phone = '';
      this.loginForm.code = '';
      this.codeTimer = 0; // 重置验证码计时器
    },
    sendCode() {
      // 模拟发送验证码
      if (!/^1[3-9]\d{9}$/.test(this.loginForm.phone)) {
        this.$message.error('请输入有效的手机号');
        return;
      }

      //发送验证码
      let url = "/login/"+this.loginForm.phone+"/code"
      axios.get(url).then(result=>{
        ElMessage({
          type:"success",
          message:"发送成功"
        })

      })

      this.codeTimer = 60; // 设置60秒倒计时
      const interval = setInterval(() => {
        this.codeTimer--;
        if (this.codeTimer <= 0) {
          clearInterval(interval);
        }
      }, 1000);

    },

    handleLogin() {

      // if (this.loginForm.password === '123' || this.loginForm.password === '') {
      //   router.push("/")
      // }else {
      //   ElMessage({
      //     type:"error",
      //     message:"登录失败"
      //   })
      // }





      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 执行登录逻辑

          if (this.loginForm.password === ''){
            let url  ="/phone_login"

            let param={
              "phone": this.loginForm.phone,
              "code":this.loginForm.code,
            }
            axios.postJson(url,param).then(result=>{
              //console.log(result)
              ElMessage({
                type:"success",
                message:"手机号登录成功"
              })
              //存储  用户信息 到本地
              userStore().userModel = result.data.adminUser;
              router.push("/home")
            })
          }

          if (this.loginForm.phone === ''){
            let url  ="/user_login"

            let param={
              "username": this.loginForm.username,
              "password":this.loginForm.password,
            }
            console.log(url,param)
            axios.postJson(url,param).then(result=>{
              console.log(result)
              ElMessage({
                type:"success",
                message:"用户名密码登录成功"
              })
              //存储  用户信息 到本地
              userStore().userModel = result.data.adminUser;
              router.push("/home")
            })
          }


          console.log('登录成功:', this.loginForm);
        } else {
          console.error('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>
























<style scoped>
.login-container {
  height: 100vh; /* 设置容器高度为视口高度 */
  background-image: url('src/assets/images/Snipaste_2024-07-30_16-20-33.png');
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  display: flex; /* 使用 flex 布局居中内容 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.login-card {
  margin-left: 400px;
  width: 520px;

}


.login-type-selection {
  display: flex; /* Flexbox布局 */
  justify-content: space-between; /* 内容均匀分配 */
}

.login-type-card {
  background-color: #e0f7fa; /* 淡蓝色背景 */
  margin: 10px; /* 设置边距 */
  cursor: pointer; /* 鼠标悬停时改变为手指光标 */
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.login-type-card.active {
  background-color: #b2ebf2; /* 激活状态的背景颜色 */
}
.login-type-card{
  width: 160px;
  height: 60px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

*{
  margin: 0;
  padding: 0;
}
.main{
  width: 804px;
  height: 804px;
  animation: roll 3000ms linear infinite;
}
@keyframes roll{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(-360deg);}
}
.white_circle{
  z-index: 99;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: white;
  margin: 377px 0 0 377px;
}
.fla{
  position: absolute;
  width: 402px;
  height: 180px;
}
.fla_one{
  transform: rotate(270deg);
  margin:108px 0px 0px 121px;
}
.fla_two{
  transform: rotate(180deg);
  margin-top: 389px;
}
.fla_three{
  transform: rotate(90deg);
  margin: 511px 0 0 280px;
}
.fla_four{
  transform: rotate(360deg);
  margin: 230px 0 0 402px;
}
.tri{
  width: 0;
  height: 0;
  border-width: 142px;
  border-style: solid;
  border-top-left-radius: 109px 122px;
  position: absolute;
  transform: rotate(45deg);
  top: 28px;
  left: 56px;
}
.tri_one {
  border-color: #F1C40F transparent transparent #F1C40F;
}
.tri_two {
  border-color: #EA4C3C transparent transparent #EA4C3C;
}
.tri_three {
  border-color: #2ECC71 transparent transparent #2ECC71;
}
.tri_four {
  border-color: #1ABC9C transparent transparent #1ABC9C;
}
.squ{
  position: absolute;
  width: 271px;
  height: 170px;
  border-top-right-radius: 98px 68px;
}
.squ_one{
  background-color: #F39C12;
}
.squ_two{
  background-color: #C0392B;
}
.squ_three{
  background-color: #27AE60;
}
.squ_four{
  background-color: #16A085;
}
</style>